<template>
  <div>
    <el-dialog
      :title="this.$t('LineManagementLang.set_city')"
      :visible.sync="Visible"
      width="500px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="dialogBox top">
          <MyTable
          :tableColumn="tableColumn"
          :tableData="tableData"
          :isOrder="false"
          @sendTabClick="setTabClick"
          >
            <template v-slot:content="scope">
              <span v-if="scope.config.templateType=='Select'">
                <span v-if="scope.row.index === tabClickIndex && tabClickLabel === scope.config.label&&!isDetails">
                  <el-select
                    v-fo-select
                    @visible-change="inputType"
                    v-model="scope.row[scope.config.prop]"
                  >
                    <el-option
                      v-for="item in options_city"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>  
                </span> 
                <!-- <span v-else>{{ scope.row[scope.config.prop] }}</span> -->
                <span v-else>{{ options_city.filter(el=>{return el.id==scope.row[scope.config.prop]}).length>0?options_city.filter(el=>{return el.id==scope.row[scope.config.prop]})[0].name_current:'' }}</span>
              </span>
              <span v-else>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="!isDetails" type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      Visible: false,
      isDetails:false,
      typeStr:'',
      options_city:[],
      tableColumn: [
        {
          checked: true,
          label: this.$t('LineManagementLang.now_city'),
          prop: "name_current",
          width:200,
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.point_city'),
          prop: "bind_id",
          templateType:'Select',
        }
      ],
      tableData: [],
      tabClickIndex:null,
      tabClickLabel:null,
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
  },
  methods: {
   
    init(typeStr,list,option,isDetails) {
      this.tableData = list;
      this.typeStr=typeStr
      this.options_city=option
      this.isDetails = isDetails;
      this.Visible = true;
    },
    // 提交修改
    confirm() {
      // 是否有空值必选项标识
      if (this.confirmTrue) {
        this.confirmTrue=false
        this.$emit("success",this.tableData,this.typeStr);
        this.cancel()
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000)
      }
    },
    setTabClick({index,label}){
      this.tabClickIndex=index
      this.tabClickLabel=label
    },
    //下拉框选择初始化
    inputType(type) {
      if(!type){
        this.tabClickIndex = null
        this.tabClickLabel = null    
      }
    },
    //取消修改
    cancel() {
      this.tabClickIndex = null
      this.tabClickLabel = null   
      this.Visible = false;
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  .dialogBox .dialogBoxItem {
    flex-wrap: wrap;
    gap: 1%;
    justify-content: flex-start;
    .dialogBoxItemRow {
      width: 24%;
    }
  }
  /deep/.el-dialog__wrapper .el-dialog{
    min-width: unset !important;
  }
</style>